<template>
  <div class="center-chart-root1">
    <div id="center-chart1"></div>
  </div>
</template>

<script>
const echarts = require("echarts");
export default {
  data() {
    return {
      jzy_xfsjsc: 0,
      jzy_qtlxfsjsc: 0
    };
  },
  props: ["chartData"],
  mounted() {
    this.draw();
  },
  watch: {
    chartData: {
      handler: function() {
        this.draw();
      },
      deep: true
    }
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      let myChartPieLeft = echarts.init(
        document.getElementById("center-chart1")
      );
      if (this.chartData) {
        this.jzy_xfsjsc = this.chartData.jzy_xfsjsc
          ? this.chartData.jzy_xfsjsc
          : 0;
        this.jzy_qtlxfsjsc = this.chartData.jzy_qtlxfsjsc
          ? this.chartData.jzy_qtlxfsjsc
          : 0;
      }
      console.log("zzzzzzzz", this.chartData);
      let addjzy = this.jzy_xfsjsc + this.jzy_qtlxfsjsc;

      let option = {
        color: ["rgba(3, 73, 169, 0.1)", "#fcb33a", "#2BB7FF"],
        series: [
          {
            name: "访问来源",
            type: "pie",
            // selectedMode: "single",
            selected: {
              another: false,
              another1: false
            },
            radius: ["50%", "60%"],
            label: {
              show: false
            },
            data: [
              {
                name: "another",
                value: addjzy - this.jzy_qtlxfsjsc
              },
              {
                name: "another3",
                value: this.jzy_qtlxfsjsc
              }
            ]
          },
          {
            name: "访问来源",
            type: "pie",
            radius: ["70%", "80%"],
            // selectedMode: "single",
            selected: {
              another: false,
              another1: false
            },
            label: {
              show: false
            },
            data: [
              { name: "another", value: addjzy - this.jzy_xfsjsc },
              { name: "another4", value: this.jzy_xfsjsc }
            ]
          }
        ]
      };

      myChartPieLeft.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
.center-chart-root1 {
  position: relative;

  #center-chart1 {
    width: 15rem;
    height: 15rem;
    margin-top: -11.4rem;
    margin-left: 37rem;
  }
}
</style>
